<template>
  <div class="form-menu">
    <FormMenuList ref="FormMenuList" :menus="menus" v-model="selectedMenu"/>
    <FormMenuEditor @addNew="() => $refs.FormMenuList.addNew()"
                    ref="FormMenuEditor" :formDefinition="formDefinition"
                    :menu="selectedMenu" v-model="selectedMenu"/>
  </div>
</template>
<script>
import FormMenuList from '@/components/hhd/design/FormMenu/FormMenuList.vue';
import FormMenuEditor from '@/components/hhd/design/FormMenu/FormMenuEditor.vue';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import {createProps, isEmpty} from '@/utils';

export default {
  name: 'FormMenu',
  components: {FormMenuEditor, FormMenuList},
  props: {
    menus: createProps(Array),
    formDefinition: createFormDefinition(),
  },
  data() {
    return {
      selectedMenu: undefined,
    }
  },
  methods: {
    active() {
      this.selectedMenu = undefined;
    },
    check() {
      return new Promise((success, err) => {
        let list = this.menus || [];
        for (let i = 0; i < list.length; i++) {
          if (isEmpty(list[i].menuName) || isEmpty(list[i].showFields)) {
            this.$notification.error({message: '业务列表名称 和 业务列表显示项 不能为空!'});
            return;
          }
        }
        success();
      });
    },
  },
  watch: {
    formDefinition: {
      handler() {
        this.selectedMenu = undefined;
      },
      immediate: true,
    }
  }
}
</script>
<style>
.form-menu {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>